import { useState } from "react";
import styles from './index.module.scss';
import getCalendar from "@utils/getCalendar";
import AliIcon from "@components/aliIcon";
import dayjs from "dayjs";

const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

const Calendar = () => {

    const [year, setYear] = useState(new Date().getFullYear());
    const [month, setMonth] = useState(new Date().getMonth() + 1);
    const [activeDate, setActiveDate] = useState(dayjs().format('YYYY/MM/DD'));

    const handlePreYear = () => {
        setYear(year - 1);
    }

    const handlePreMonth = () => {
        if (month === 1) {
            setMonth(12);
            setYear(year - 1);
        } else {
            setMonth(month - 1);
        }
    }

    const handleNextYear = () => {
        setYear(year + 1);
    }

    const handleNextMonth = () => {
        if (month === 12) {
            setMonth(1);
            setYear(year + 1);
        } else {
            setMonth(month + 1);
        }
    }

    return <div className={styles.calendar_wrap}>
        <div className={styles.calendar_head}>
            <div className={styles.pre_year} title="上一年"
                onClick={handlePreYear}
            >
                <AliIcon icon="icon-shangyigeshangyiqu" />
            </div>
            <div className={styles.pre_month} title="上一月"
                onClick={handlePreMonth}
            >
                <AliIcon icon="icon-shangyige" />
            </div>
            <div className={styles.show_year_month}>{year}年{month < 10 ? ('0' + month) : month}月</div>
            <div className={styles.next_month} title="下一月"
                onClick={handleNextMonth}
            >
                <AliIcon icon="icon-xiayige" />
            </div>
            <div className={styles.next_year} title="下一年"
                onClick={handleNextYear}
            >
                <AliIcon icon="icon-xiayigexiayiqu" />
            </div>
        </div>
        <div className={styles.main}>
            <ul className={styles.weeks}>
                {
                    weeks.map((v, i) => {
                        return <li key={i}>{v}</li>
                    })
                }
            </ul>
            <ul className={styles.main_ul}>
                {
                    getCalendar(year, month).map((v, i) => {
                        return <li key={v.date}
                            className={`${styles.main_li} ${styles[`main_li${i + 1}`]} ${v.isNowMonth ? styles.common : ''} ${activeDate === v.date ? styles.active : ''}`}
                            onClick={() => {
                                setActiveDate(v.date);
                            }}
                        >{v.day}</li>
                    })
                }
            </ul>
        </div>
    </div>
}

export default Calendar;